<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1400" @close="mycloseWeek"
          :fullscreen="false">
    <template #title>
      <div class="yirc99-dialg-heard">
        <div class="yirc99-dialg-heard-left">实验室名称: {{ labName }}</div>
        <div class="yirc99-dialg-heard-right">
          <el-select
            @change="changeWeek(weekValue)"
            v-model="weekValue"
            placeholder="当前第N周"
            style="width: 240px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :value="item.value"/>
          </el-select>
        </div>
      </div>
    </template>


    <div class="yirc99-table">
      <div class="yirc99-heard">
        <div class="yirc99-heard-item-start">
          选择预约时间
        </div>
        <div class="yirc99-heard-item" v-for="(item, index) in days" :key="index">
          {{ item }}
        </div>
      </div>
      <div class="yirc99-body">
        <div class="yirc99-left">
          <div class="yirc99-left-item" v-for="(item, index) in times" :key="index">
            {{ item }}
          </div>
        </div>
        <div class="yirc99-right">
          <div class="yirc99-right-item" v-for="(item, index) in labData" :key="index">
            <!--              '选中状态 0可选 1选中 2不可选'-->
            <div class="yirc99-right-sub-item"
                 :style="item2.choose == 2 ? 'background-color: #DC1414FF;' : item2.choose == 1 ? 'background-color: #28A128FF;' : ''"
                 v-for="(item2, index2) in item" @click="myclick(index,index2)" :key="index2">
<!--              {{ item2.name }}-->
            </div>
          </div>
        </div>
      </div>
    </div>


    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import {CommonStatusEnum} from '@/utils/constants'
import * as RoleApi from '@/api/system/role'
import * as ProjectApi from '@/api/laboratory/lab'
import {BottomRight} from "@element-plus/icons-vue";
import {getLaboratoryPlaceById} from "@/api/laboratory/lab";
import router from "@/router";

defineOptions({name: 'SystemRoleForm'})
const {push} = useRouter() // 路由
let labName = ref('') //当前选中的实验室名称
let days = ref(['星期一', '星期二', '星期三', '星期四', '星期五'])
let times = ref(['上午第一节课', '上午第二节课', '下午第一节课', '下午第二节课', '晚上第一节课', '晚上第二节课'])
// 一个二维数组 元素为对象 name为课程名称
// {
//   choose: '选中状态 0可选 1选中 2不可选'
//   id: 'id'
// }
// 二维数组大小 5 * 4
let labData = ref([[], [], [], [], []])

// 选择的第几节课
let section = ref(0)
//选择的那一天
let weekDay = ref(0)

const myclick = (i, j) => {
  section = j + 1
  weekDay = i + 1
  console.log('click', section, '选择的那一天', weekDay)
  if (labData.value[i][j].choose == 2) {
    // 已经被选中了 弹出提示 不可以选中
    ElMessage.error('该时间段已被预约')
    return
  }
  if (labData.value[i][j].choose == 0) {
    //遍历整个数据 将1改为0
    for (let i = 0; i < 5; i++) {
      for (let j = 0; j < 6; j++) {
        if (labData.value[i][j].choose != 2) {
          labData.value[i][j].choose = 0
        }
      }
    }
  }
  labData.value[i][j].choose = 1
}
const getAppointmentData = (resultArr: Array<number>, WeekItem: number = 0) => {
  console.log(resultArr)
  labData.value = [[], [], [], [], []]
  weekValue.value = options.value[WeekItem].value
  for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 6; j++) {
      labData.value[i].push({
        name: '名称' + i + '-' + j,
        choose: resultArr[j][i],
        id: 'id'
      })
    }
  }
}
// 选择周次
let weekValue = ref('')
let options = ref([])
const getWeek = () => {
  options.value = []
  for (let i = 0; i < 18; i++) {
    options.value.push({
      value: '第' + (i + 1) + '周'
    })
  }
}
let WeekItem = ref(1)
const changeWeek = async (value) => {
  WeekItem.value = value.substring(1, value.length - 1)
  const data = await ProjectApi.getLaboratoryPlaceById(code.value, WeekItem.value)
  getAppointmentData(data.result, WeekItem.value - 1)
}

onMounted(() => {
  // 模拟周次数据
  getWeek()
});


const {t} = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  code: "",
  name: "",
  expPurpose: "",
  expRequest: "",
  expContent: "",

})
const formRules: any = reactive({
  code: [{required: true, message: '项目编号不能为空', trigger: 'blur'}],
  name: [{required: true, message: '项目名称不能为空', trigger: 'change'}],
  expPurpose: [{required: true, message: '实验目的不能为空', trigger: 'change'}],
  expRequest: [{required: true, message: '实验要求不能为空', trigger: 'change'}],
  expContent: [{required: false, message: '实验内容不能为空', trigger: 'blur'}],
})
const formRef = ref() // 表单 Ref
let LabId = ref(0)
let row = ref({})
let code = ref('')
/** 打开弹窗 */
const open = async (type: string, row1: object) => {
  console.log('弹窗出现了', row1.row.id)

  row = row1.row
  LabId = row.id
  code.value = row.code
  labName.value = row.name
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type

  resetForm()
  // 修改时，设置数据
  if (row.id) {
    formLoading.value = true
    try {
      const data = await ProjectApi.getLaboratoryPlaceById(row.code, 1)
      getAppointmentData(data.result)
      formData.value = data.result
    } finally {
      formLoading.value = false
    }
  }
}

const mycloseWeek = () => {
  console.log('close week')
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    code: "",
    name: "",
    expPurpose: "",
    expRequest: "",
    expContent: ""
  }
  formRef.value?.resetFields()

}
defineExpose({open}) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  console.log(row)
  if (weekDay.value == 0 || row.code == undefined || WeekItem == undefined) {
    ElMessage.error('请选择预约时间')
    console.log('跳转参数有误')
    return
  }
  console.log('WeekItem', WeekItem)
  push({
    name: 'BpmProcessInstanceCreate',
    query: {
      week: Number(WeekItem.value),
      code: row.code,
      weekDay: weekDay,
      section: section, // 第几节
    }
  })
  console.log('dian')
}
</script>

<style lang="scss">
$item-height: 58.5px;
.yirc99-dialg-heard {
  display: flex;
  justify-content: space-between;
  flex: 1;

  .yirc99-dialg-heard-left {
    font-size: 25px;
    margin-left: 5px;
    font-weight: bold;
    margin-right: 200px;
  }

  .yirc99-dialg-heard-right {
    margin-right: 120px;
  }
}

.yirc99-heard-item, .yirc99-left-item {
  //border-top: 1px solid #d9d9d9;
  //border-right: 1px solid #d9d9d9;
}

.yirc99-heard-item:last-child, .yirc99-left-item:last-child {
  border-right: none;
}


.yirc99-table {
  border: 1px solid #eee;
  height: 400px;
  display: flex;
  flex-direction: column;
  border-bottom: none;
  bottom-right: none;

  .yirc99-heard {
    display: flex;
    border-bottom: 1px solid #eee;

    .yirc99-heard-item-start {
      border-right: 1px solid #eee;
      width: 215.5px;
      height: 50px;
      display: flex;
      justify-content: center;
      font-weight: bold;
      align-items: center;
      font-size: 15px;
      box-sizing: border-box;
    }

    .yirc99-heard-item {
      width: 250px;
      height: 50px;
      display: flex;
      justify-content: center;
      font-weight: bold;
      align-items: center;
      font-size: 15px;
      box-sizing: border-box;
      border-right: 1px solid #eee;
    }
  }

  .yirc99-body {
    display: flex;

    .yirc99-right {
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      .yirc99-right-item {
        //width: 227px;
        flex: 1;
        //width: 20%;
        height: $item-height;
        text-align: center;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        transition: background-color 0.3s;

        .yirc99-right-sub-item {
          flex: 1;
          height: $item-height;
          text-align: center;
          box-sizing: border-box;
          border-right: 1px solid #eee;
          border-bottom: 1px solid #eee;
          transition: background-color 0.3s;
          text-align: center;
          box-sizing: border-box;
        }
      }

      .yirc99-right-sub-item:hover {
        background-color: #d9d9e2;
      }

    }

    .yirc99-left {
      border-right: 1px solid #eee;

      .yirc99-left-item {
        border-bottom: 1px solid #eee;
        //width: 215.5px;
        width: 195px;
        display: flex;
        justify-content: center;
        height: $item-height;
        align-items: center;
        box-sizing: border-box;
      }
    }

  }
}

.demonstration {
  margin: 10px 0;
}

</style>

